<template>
  <div class="index">
    <Header></Header>
    <div class="main" style="padding-top: 80px;padding-bottom: 0px;">
      <div class="banner">
        <el-carousel trigger="click" height="360px" arrow="never">
          <el-carousel-item v-for="(item,index) in imgList" :key="index">
            <div class="banner_div">
              <img :src="item.picAddress" style="width: 100%;height: 360px">
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="indexMain">
        <div class="clearfix information_index" style="background: #fff">
          <div class="fr information_half" style="padding-bottom: 0;width: 50%">
            <div class="halfDiv_top clearfix" style="text-align: center;font-size: 20px"><h3>预案检测数量统计</h3></div>
            <div id="chart" ref="chart"></div>
          </div>

          <div class="fl information_half" style="padding-bottom: 0;padding: 15px 0">
            <div class="halfDiv_top clearfix"><h3>入驻企业数量统计</h3></div>
            <div class="bzImg_box">
              <span v-for="(item,index) in dataList" v-if="item.name!='其他行业'"
                    :style="{backgroundImage: 'url('+ item.logo +')', backgroundRepeat:'no-repeat', backgroundPosition:'center left'}">
                  {{item.name}}:{{item.count}}
              </span>
            </div>
          </div>
        </div>
        <div class="clearfix information_index">
          <div class="information_half contentDiv" style="padding-bottom: 0;width: 100%">
            <h1 style="padding-top: 10px;font-size: 20px">应急预案检测功能体验</h1>
            <span>用户将应急预案上传到对应的检测栏，1秒即可得到！</span>
            <div class="clearfix" style="padding-top: 20px">
              <div class="item_div">
                <img src="../../../static/images/01.png" alt="">
                <h1>检测程序合规</h1>
                <span>平台检测程序严格按照国家行业相关法规标准要求，合法合规。</span>
              </div>
              <div class="item_div">
                <img src="../../../static/images/02.png" alt="">
                <h1>检测内容全面</h1>
                <span>对应急预案的结构和内容同时进行检测,全面发现应急预案存在的问题。</span>
              </div>
              <div class="item_div">
                <img src="../../../static/images/03.png" alt="">
                <h1>检测操作方便</h1>
                <span>用户将应急预案上传到对应的检测栏，1秒即可得到该应急预案的检测报告。</span>
              </div>
              <div class="item_div">
                <img src="../../../static/images/04.png" alt="">
                <h1>检测结果权威</h1>
                <span>应急预案检测经过应急专家评审，并通过上千个应急预案测试，确保权威。</span>
              </div>
            </div>
            <div class="enterDiv">
              <router-link
                style="color: #4a8fff"
                :to="{
                                    path: 'experience'
                                }"
              >点击进入 <img src="../../../static/images/jt11.png" alt=""></router-link
              >
            </div>
          </div>
        </div>
        <div class="clearfix information_index hoverClick"
             style="
             height: 135px;background: #0c37f9;text-align: center;padding-top: 40px;
             background: url('../../../static/images/xiDaJH.png') no-repeat center center;
             color: #fff;background-size: 100% 100%" @click="goToJH">
        </div>
        <div class="clearfix information_index">
          <div class="halfDiv_top clearfix" style="text-align: center;padding: 30px 0"><h3
            style="font-weight: bold;font-size: 20px;">
            应急资讯</h3></div>
          <div class="fl information_half" style="width: 50%;">
            <div class="halfDiv_top clearfix">
              <h3 class="fl">时事新闻</h3>
              <router-link :to="{path:'list1',query:{name:'时事新闻'}}" class="fr">更多&gt;</router-link>
            </div>
            <img :src="newsImg" alt="" style="width: 530px;height: 220px;margin-bottom: 10px">
            <ul class="half_list1">
              <li v-for="(item,index) in newsList" :key="index">
                <img src="../../../static/images/yq.png">
                <span><router-link :to="{path:'newsDetail',query:{id:item.id,type:0}}" :title="item.title"><!-- <router-link :to="{path:'newsDetail',query:{id:item.id}}" :title="item.title">--><a>{{item.title}}</a></router-link>
                  <!--</router-link>--></span>
                <span>{{item.publishTime | timeBy}}</span>
              </li>
            </ul>
          </div>
          <div class="fr information_half" style="width: 50% ;padding-right: 20px;padding-left: 0px">
            <div class="halfDiv_top clearfix">
              <h3 class="fl">事故案例</h3>
              <router-link :to="{path:'list2',query:{name:'事故案例'}}" class="fr">更多&gt;</router-link>
            </div>
            <img src="../../../static/images/sgal.jpg" alt="" style="width: 100%;height: 220px;margin-bottom: 10px">
            <ul class="clearfix half_list1">
              <li v-for="(item,index) in newsList1" :key="index" class="clearfix">
                <img src="../../../static/images/yq.png">
                <span><router-link
                  :to="{path:'newsDetail1',query:{id:item.intId}}"><a>{{item.varName}}</a></router-link></span>
                <span> {{item.datProduceDate|timeBy}}</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="clearfix information_index"
             style="text-align: center;padding-bottom: 20px;
        background: url('../../../static/images/zhuangJiaBJ.png') center center;">
          <div class="tabDiv">
            <p v-for="(val,index) in tabList" :key="index" @click="addClass(3,index)"
               :class="{'active':position == index}">{{val}}</p>
          </div>
          <div class="bzImg_box" style="padding: 20px 70px!important;">
              <span v-for="(item,index) in regionList" :key="index" class="regionTab"
                    @click="pathgoregion(item.name,item.id,index)"
                    :class="{'tabactive':indexs === index}">
                <a>{{item.name}}</a>
              </span>
          </div>
        </div>
        <div class="clearfix information_index" style="padding-bottom: 0">
          <div class="information_half contentDiv"
               style="padding-bottom: 0!important;width: 100%;padding-right: 0;padding-left: 0">
            <h1 style="padding-top: 10px;font-size: 20px">应急知识科普</h1>
            <div class="clearfix">
              <div class="item_div1" v-for="(item,index) in knowledgeList" :key="index"
                   :class="{
                   'bg1':item.name=='生活安全',
                   'bg2':item.name=='自然灾害',
                   'bg3':item.name=='事故灾难'
                   }">
                <div style="height: 145px;width: 100%;background: #fff;position: relative;top: 175px;padding: 0 40px">
                  <h1 style="border-bottom: 1px solid #eee;"><a @click="pathtoLeft(0,item.name,item.id,item,index)">{{item.name}}</a>
                  </h1>
                  <span style="text-align: left;"><a v-for="(val,indexs) in item.children" :key="indexs"
                                                     @click="pathtoLeft(1,item.name,item.id,item,indexs)">{{val.name}} <span
                    v-if="indexs<item.children.length-1"> | </span></a>  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="clearfix information_index">
          <div class="halfDiv_top clearfix" style="text-align: center;padding: 30px 0"><h3
            style="font-weight: bold;font-size: 20px">
            下载专题</h3></div>
          <div class="fl information_half" style="width: 50%;padding-right: 20px">
            <div class="halfDiv_top clearfix">
              <h3 class="fl btnDiv">应急法规</h3>
              <router-link :to="{path:'regulations1',query:{name:'应急法规'}}" class="fr">更多&gt;</router-link>
            </div>
            <ul class="half_list">
              <li v-for="(item,index) in newsList3" :key="index" @click="gotoNext(item.id)">
                <span class="span1">{{item.effectiveTime|timeBy}}</span>
               <!-- <router-link :to="{path:'newsDetail2',query:{id:item.id}}" :title="item.title">-->
                  <span>{{item.lawName}}</span><!--</router-link>-->
              </li>
            </ul>
          </div>
          <div class="fl information_half" style="width: 50%;padding-right: 20px;padding-left: 0px">
            <div class="halfDiv_top clearfix">
              <h3 class="fl btnDiv">应急处置卡</h3>
              <router-link :to="{path:'regulations',query:{name:'应急处置卡'}}" class="fr">更多&gt;</router-link>
            </div>
            <ul class="half_list">
              <li v-for="(item,index) in newsList2" :key="index" @click="gotoNext1(item.id)">
                <span class="span1">{{item.createTime | timeBy}}</span>
              <!--  <router-link :to="{path:'newsDetail',query:{id:item.id,type:2}}" :title="item.title">--><span
                  class="span2">{{item.title}}</span><!--</router-link>-->
              </li>
            </ul>
          </div>
        </div>
        <div class="clearfix information_index"
             style="height: 80px;text-align: center;margin-bottom: 20px">
          <div class="partnerul">
            <span style="margin-right: 35pxpx;font-weight: bold">友情链接 |</span><span v-for="(val,index) in linkList"
                                                                                    :key="index"
                                                                                    @click="addClass(2,index)">{{val}}</span>
          </div>
        </div>


        <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="300px"
        >
          <div style="text-align: center;font-size: 16px;height:10px;line-height:10px;">
            暂未开通
          </div>

        </el-dialog>
      </div>
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
  import config from "../../config.js";
  import Header from '../common/header3'
  import Footer from '../common/footer1'

  export default {
    data() {
      return {
        formInline: {
          companyEmergencyName: "",
          planCategory: ""
        },
        activeIndex: 0,
        navList: [
          '应急动态', '应急知识', '应急处置卡'
        ],
        data: [],
        types: [
          {
            name: '全部',
            value: ''
          }, {
            name: '综合预案',
            value: '1'
          }, {
            name: '专项预案',
            value: '2'
          }, {
            name: '现场处置方案',
            value: '3'
          }
        ],
        dialogVisible: false,
        changemsg: 1,
        loginstate: 4,
        stepNote: true,
        imgList: [],
        halfList1: [
          {publishTime: '2019-12-12 20:05:19', name: '应急法规测试数据一'},
          {publishTime: '2019-12-12 20:05:19', name: '应急法规测试数据二'},
          {publishTime: '2019-12-12 20:05:19', name: '应急法规测试数据三'}
        ],
        halfList2: [
          {publishTime: '2019-12-12 20:05:19', name: '应急处置卡测试数据一'},
          {publishTime: '2019-12-12 20:05:19', name: '应急处置卡测试数据二'},
          {publishTime: '2019-12-12 20:05:19', name: '应急处置卡测试数据三'}
        ],
        halfList3: [
          {publishTime: '2019-12-12 20:05:19', name: '应急预案库测试数据一'},
          {publishTime: '2019-12-12 20:05:19', name: '应急预案库测试数据二'},
          {publishTime: '2019-12-12 20:05:19', name: '应急预案库测试数据三'}
        ],
        dataList: [{"name": "电力", "num": "15", "url": "../../../static/images/dl.png"},
          {"name": "建筑", "num": "13", "url": "../../../static/images/jz.png"},
          {"name": "水利", "num": "11", "url": "../../../static/images/sl.png"},
          {"name": "工贸", "num": "125", "url": "../../../static/images/gm.png"},
          {"name": "交通", "num": "5", "url": "../../../static/images/jt.png"},
          {"name": "危化品", "num": "35", "url": "../../../static/images/whp.png"},
          {"name": "非媒矿", "num": "45", "url": "../../../static/images/fmk.png"},
          {"name": "化工", "num": "1", "url": "../../../static/images/hg.png"},
          {"name": "煤矿", "num": "12", "url": "../../../static/images/mk.png"},
          {"name": "烟花爆竹", "num": "8", "url": "../../../static/images/yhbz.png"},
          {"name": "民爆", "num": "10", "url": "../../../static/images/mb.png"},
          {"name": "教育", "num": "55", "url": "../../../static/images/jy.png"}],
        tabList: ['应急预案评审与备案', '应急专家智库'],
        position: 0,
        regionList: [],
        indexs: 0,
        linkList: ['国务院安全生产委员办公室', '中华人民共和国应急管理部', '国家安全生产应急救援中心', '应急装备之家', '国家能源局'],
        changetab: 0,
        newsList: [],
        newsList1: [],
        newsList2: [],
        newsList3: [],
        newsImg: '',
        knowledgeList: []
      }
    },
    components: {
      Header,
      Footer
    },
    watch: {
      'activeIndex': function (newV, oldV) {
        this.getList(newV + 1)
      },
      '$store.state.loginstates': function (newVal) {
        this.loginstate = newVal;
      }
    },
    mounted() {

      if (localStorage.showFlag == 1) {
        this.$store.state.showflag1 = false
      } else {
        if (localStorage.showTime == 0) {
          this.$store.state.showflag1 = true
          localStorage.removeItem('showTime')
        }
      }
      this.initCharts();
      this.getimg();
      this.getRegion()
      this.getnewsImg()
      this.getnewsList()
      this.getnewsList1()
      this.getnewsList2()
      this.getnewsList3()
      //  this.getList(1)
      //  this.changemsg = this.$store.state.changestate;
      //  console.log(this.changemsg)
    },
    methods: {
      goToJH() {
        this.$router.push({name: 'discussion'});
        // window.open('http://www.xinhuanet.com/yingjijiuyuan/2020-01/07/c_1210428825.htm', 'blank');
      },
      addClass(num, index) {
        if (num == 1) {
          this.indexs = index
          //
        } else if (num == 2) {
          if (index == 0) {
            window.open('https://www.mem.gov.cn/awhsy_3512/', 'blank');
          }
          if (index == 1) {
            window.open('https://www.mem.gov.cn/', 'blank');
          }
          if (index == 2) {
            window.open(' http://www.chinacoal-safety.gov.cn/', 'blank');
          }
          if (index == 3) {
            window.open('http://eeh.emerinfo.cn/dist/#/home', 'blank');
          }
          if (index == 4) {
            window.open('http://www.nea.gov.cn/', 'blank');
          }
        } else {
          this.position = index
        }

      },

      getList1() {
        this.$axios.post(config.baseUrl + 'emergency/v1.0/business/list', {
          "pageIndex": 1,
          "pageSize": 20,
          "searchType": "1"
        }).then((res) => {
          if (res.data.meta.success) {
            this.dataList = res.data.data.records
            this.getbuesCount(res.data.data.records)
          } else {

          }

        }).catch((response) => {
          console.log(response);
        })
      },
      getbuesCount(dataList) {
        this.$axios.get(config.baseUrl + 'emergency/v1.0/index/companys/tj').then((res) => {
          if (res.data.meta.success) {
            let list = res.data.data
            dataList.forEach(item => {
              //  item['count']=Math.floor((Math.random()*100)+1);
              this.$set(item, 'count', Math.floor((Math.random() * 100) + 1));
              list.forEach(map => {
                if (item.id == map.businessId) {
                  this.$set(item, 'count', map.count);
                  //item['count']=map.count;
                }
              })
            })
            this.dataList = dataList
          } else {

          }

        }).catch((response) => {
          console.log(response);
        })
      },
      getList2() {
        this.$axios.post(config.baseUrl + 'emergency/v1.0/infomation/list', {
          pageIndex: 1,
          pageSize: 3,
          type: '2'
        }).then((res) => {
          // console.log(res)
          if (res.data.meta.success) {
            // this.halfList2 = res.data.data.records
          } else {

          }

        }).catch((response) => {
          console.log(response);
        })
      },
      getChart() {
        this.$axios.get(config.baseUrl + 'emergency/v1.0/index/plan/checked/tj')
          .then((res) => {
            if (res.data.meta.success) {
              /*
                            this.initCharts([{
                              name: '综合应急预案', value: 30

                            }, {name: '专项应急预案', value: 80}, {name: '现场处置方案', value: 40}])*/

              var chartData = []
              res.data.data.map(item => {
                chartData.push({
                  value: item.checkCount,
                  name: item.planName
                })
              })
              this.initCharts(chartData)
            } else {
              this.initCharts([{
                name: '综合应急预案', value: 0

              }, {name: '专项应急预案', value: 0}, {name: '现场处置方案', value: 0}])
            }

          }).catch((response) => {
          console.log(response);
        })
      },
      getimg() {
        this.$axios.post(config.baseUrl + 'emergency/v1.0/advertisement/list', {"type": "2"})
          .then((res) => {
            if (res.data.meta.success) {
              this.imgList = res.data.data
            } else {
              this.$message.warning(res.data.msg);
            }

          }).catch((response) => {
          console.log(response);
        })
      },
      initCharts(n) {
        let myChart = this.$echarts.init(this.$refs.chart);
        // 绘制图表
        myChart.setOption(
          {
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
              orient: 'vertical',
              x: '0',
              y: 'bottom',
              textStyle: {
                color: '#333'
              }
            },

            series: [
              {
                name: '',
                type: 'pie',
                radius: ['50%', '70%'],
                center: ['53%', '50%'],
                avoidLabelOverlap: false,
                label: {
                  normal: {
                    formatter: '{b}:{c}个',
                    textStyle: {
                      color: '#333'
                    }
                  }
                },
                /*     emphasis: {
                       label: {
                         show: true,
                         fontSize: '30',
                         fontWeight: 'bold'
                       }
                     },*/
                color: ['#4a8fff', '#f22c34', '#f8ba34'],
                labelLine: {
                  show: true
                },
                data: n
              }
            ]
          }
        )
        window.onresize = function () {
          myChart.resize();
        }
      },
      getList(n) {
        this.$axios
          .get(config.baseUrl2 + "getContingencyPlanList?page=1&limit=6&type=" + n)
          .then(res => {

            if (res.data.code == 0) {
              this.data = res.data.page.list
              console.log(res.data.page.list)
            } else {
              this.$message.warning(res.data.msg);
            }
          })
          .catch(response => {
            console.log(response);
          });
      },
      showmsg() {
        this.dialogVisible = true;
      },
      /* lookstatus() {
         let params = {
           "companyId": '733323538001297408'
         }
         this.$axios
         ({
           method: 'post',
           url: this.$baseUrl + "emergency/v1.0/selected/risk",
           data: params
         }).then(
           (res) => {
             if (res.data.meta.success) {
               let arr = res.data.data.riskIds
               let brr = arr.split(",");
               let crr = [];
               brr.forEach(
                 (item) => {
                   crr = [...crr, {riskId: item}]
                 }
               )
               localStorage.newList = JSON.stringify(crr);
               this.changemsg = 4;
             } else {
               this.newmsg();
             }
           }
         )
       },*/
      /*      newmsg() {
              let params = {
                "companyId": '733323538001297408'
              }
              this.$axios
              ({
                method: 'post',
                url: this.$baseUrl + "emergency/v1.0/company/info",
                data: params
              }).then(
                (res) => {
                  let data = res.data.data;
                  console.log(data);

                  if (data.varEmergencyDept) {
                    this.changeList = true;
                    this.$store.state.changestate = 2;
                    let arr = [];
                    if (localStorage.getItem("newList")) {
                      arr = JSON.parse(localStorage.getItem("newList"));
                    }
                    if (arr.length >= 2) {
                      this.changemsg = 3;
                    } else {
                      this.changemsg = 2;
                    }
                  } else {
                    this.changemsg = 1;
                  }
                })
            },*/
      getRegion() {
        let params = {
          "pageIndex": 1,
          "pageSize": 120,
          "searchType": "1"
        }
        this.$axios
        ({
          method: 'post',
          url: this.$baseUrl + "emergency/v1.0/region/list",
          data: params
        }).then(
          (res) => {
            this.regionList = res.data.data.records;

          })
      },
      getnewsImg() {
        let params = {}
        this.$axios
        ({
          method: 'post',
          url: this.$baseUrl + "emergency/v1.0/index/news/image",
          data: params
        }).then(
          (res) => {
            if (res.data.meta.success) {
              this.newsImg = res.data.data.url;
            }
          })
      },
      getnewsList() {
        let params = {
          "pageIndex": 1,
          "pageSize": 5
        }
        this.$axios
        ({
          method: 'post',
          url: this.$baseUrl + "emergency/v1.0/index/news/list",
          data: params
        }).then(
          (res) => {
            if (res.data.meta.success) {

              this.newsList = res.data.data.records;
            }
          })
      },
      getnewsList1() {
        let params = {
          "pageIndex": 1,
          "pageSize": 5,
          "type": "1"
        }
        this.$axios
        ({
          method: 'post',
          url: this.$baseUrl + "emergency/v1.0/index/emergency/cards",
          data: params
        }).then(
          (res) => {
            if (res.data.meta.success) {
              this.newsList2 = res.data.data.records;
            }
          })
      },
      getnewsList2() {
        let params = {
          "pageIndex": 1,
          "pageSize": 5
        }
        this.$axios
        ({
          method: 'post',
          url: this.$baseUrl + "/emergency/v1.0/index/cases/list",
          data: params
        }).then(
          (res) => {
            if (res.data.meta.success) {
              this.newsList1 = res.data.data.records;
            }
          })
      },
      getnewsList3() {
        let params = {
          "pageIndex": 1,
          "pageSize": 5
        }
        this.$axios
        ({
          method: 'post',
          url: this.$baseUrl + "/emergency/v1.0/index/laws/list",
          data: params
        }).then(
          (res) => {
            if (res.data.meta.success) {
              this.newsList3 = res.data.data.records;
            }
          })
      },
      getkList() {
        let params = {}
        this.$axios
        ({
          method: 'post',
          url: this.$baseUrl + "emergency/v1.0/index/knowledge/types",
          data: params
        }).then(
          (res) => {
            if (res.data.meta.success) {
              this.knowledgeList = res.data.data.children;
            }
          })
      },
      togochange(item) {
        if (item == "basic") {
          this.$router.push(item)
        } else if (item == "risk") {
          if (this.changemsg >= 2) {
            this.$router.push(item)
          } else {
            this.$message.warning("请填写公司信息");
          }
        } else if (item == "resources") {
          if (this.changemsg >= 3) {
            this.$router.push(item)
          } else {
            this.$message.warning("请录入风险信息");
          }
        }
      },
      pathtoLeft(type, name, id, item, index) {
        this.$router.push({
          name: 'knowledge',
          query: {type: type, name: name, id: id, item: JSON.stringify(item), index: index}
        });
      },
      pathgoregion(name, id, index) {
        this.indexs = index
        this.$router.push({name: 'thinktanks', query: {type: this.position, name: name, id: id}});
      },
      gotoNext(id) {
        this.$router.push({name: 'newsDetail2', query: {id: id}});
      },
      gotoNext1(id) {
        this.$router.push({name: 'newsDetail', query: {id: id,type:2}});
      },
    },
    created() {
      /*  this.lookstatus();

        this.getList2()*/
      this.getList1()
      this.getChart()
      this.getkList()
    },
    filters: {
      timeBy(val) {
        if (val) {
          return val.substring(0, 10)
        }
      },
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less' scoped>
  .hoverClick:hover {
    cursor: pointer;
  }

  .indexMain {
    width: 1200px;
    margin: 0 auto;
    .banner {
      height: 300px;
      text-align: center;
      margin-top: 25px;
      .banner_div {
        position: relative;
        img {
          height: 300px;
          width: 1920px;
          position: absolute;
          left: 50%;
          margin-left: -960px;
        }
      }
    }
    .section1 {
      background: #fff;
      padding: 9px 30px 12px;
      margin-top: 20px;
      display: flex;
      justify-content: center;
      .ml50 {
        margin-left: 50px;
      }
      .indexSearch {
        display: block;
        line-height: 36px;
        width: 79px;
        height: 36px;
        background: #4080ff;
       /* background: linear-gradient(left, #6fb2ff 0%, #095fff 100%);*/
        color: #fff;
        text-align: center;
        border: none;
        border-radius: 8px;
        margin-top: 3px;
        margin-left: 15px;
        cursor: pointer;
        > img {
          position: relative;
          top: -1px;
          margin-right: 3px;
        }
      }
      .indexSearch:hover {
        opacity: 0.8;
      }
    }
    .information_index {
      margin-top: 17px;
      background: #fff;
      .tabDiv {
        width: 100%;
        height: 60px;
        border-bottom: 1px solid #eee;
        background: #fff;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        p {
          display: inline-block;
          width: 180px;
          margin-right: 40px;
          text-align: center;
          height: 60px;
          line-height: 60px;
          cursor: pointer;
          font-size: 18px;
          font-weight: bold;
        }
        .active {
          border-bottom: 2px solid #1e5af9;
          color: #1e5af9;
        }
      }
      .contentDiv {
        padding-bottom: 50px !important;
        .enterDiv {
          width: 160px;
          height: 40px;
          line-height: 40px;
          background: #eee;
          color: #1e5af9;
          border-radius: 20px;
          margin: 40px auto 0px auto;
          text-align: center;
          cursor: pointer;
        }
      }
      .information_half {
        text-align: center;
        background: #fff;
        width: calc(50% - 20px);
        padding: 15px 30px 50px;
        h1 {
          color: #333;
          font-weight: bold;
          margin-bottom: 10px;
          padding-top: 15px;
          padding-bottom: 10px;
        }
        .item_div {
          width: calc((100% - 235px) / 4);
          //width: 250px;
          float: left;
          margin-right: 75px;
          text-align: center;
          img {
            width: 100%;
            height: 150px;
            border-radius: 20px;
          }

        }
        .item_div:nth-child(4) {
          margin-right: 0px;

        }
        .item_div1 {
          width: calc((100% - 60px) / 3);
          //width: 250px;
          background-size: 100% 100%;
          height: 320px;
          float: left;
          margin-right: 30px;
          text-align: center;
          &.bg1 {
            background: url("../../../static/images/shaq.png") no-repeat;
          }
          &.bg2 {
            background: url("../../../static/images/zrzh.png") no-repeat;
          }
          &.bg3 {
            background: url("../../../static/images/accd.png") no-repeat;
          }

          img {
            width: 100%;
            height: 150px;
            border-radius: 20px;
          }
          a:hover {
            cursor: pointer;
          }
        }
        .item_div1:nth-child(3) {
          margin-right: 0px;

        }
        .enterDiv {
          width: 160px;
          height: 40px;
          background: #eee;
          color: #1e5af9;
          border-radius: 20px;
          text-align: center;
        }
        #chart {
          height: 300px;
          width: 100%;
        }

        .bzImg_box {
          height: 300px;
          position: relative;

          span {
            display: inline-block;
            height: 35px;
            line-height: 35px;
            width: 130px;
            margin: 15px 5px;
            padding-left: 25px;
          }

          img {
            width: 100%;
            position: absolute;
            top: 32%;
          }
        }
        .halfDiv_top {
          margin-bottom: 20px;
          position: relative;
          span {
            background: #00a0e9;
            display: block;
            position: absolute;
            height: 16px;
            width: 4px;
            border-radius: 2px;
            left: -11px;
            top: 4px;
          }
          h3 {
            line-height: 24px;
            font-weight: bold;
            font-size: 16px;
          }
          a {
            color: #666;
            margin-top: 2px;
          }
        }
        .half_list {
          li {
            height: 75px;
            border-bottom: 1px dotted #ccc;
            box-shadow: 5px 5px 20px #eee;
            margin-bottom: 20px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: left;
            cursor: pointer;
            a {
              display: block;
              float: left;
              max-width: calc(100% - 100px);
              cursor: pointer;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .span1 {
              display: inline-block;
              color: #fff;
              font-size: 12px;
              float: right;
              margin-right: 10px;
              width: 100px;
              background: #195efa;
              vertical-align: middle;
              height: 75px;
              line-height: 75px;
            }
            &:hover {
              border: 1px solid #195efa;
            }
          }
        }
        .half_list1 {
          li {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-bottom: 10px;
            a {
              text-align: left;
              display: block;
              cursor: pointer;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              width: 100%;
            }
            &:hover a {
              text-decoration: underline;
              color: #195efa;
            }
            span:nth-child(2n) {
              display: inline-block;
              font-size: 12px;
              float: right;
              margin-right: 10px;
              vertical-align: middle;
              width: calc(100% - 120px);
            }
            span:nth-child(2n+1) {
              width: 90px;
            }
            img {
              margin-right: 5px;
            }
          }

        }
      }
    }
    .btnDiv {
      background: #195efa;
      color: #fff;
      border-radius: 10px;
      padding: 5px 20px;
      font-weight: normal !important;
    }
    .modules_main {
      background: #fff;
      margin-top: 20px;
      padding: 25px 0 0;
      .secTitle {
        padding-left: 25px;
        font-size: 16px;
        font-weight: bold;
        color: #666;
        margin-bottom: 20px;
      }
      .modules_list {
        padding: 0 150px;
        .modules {
          text-align: center;
          margin-bottom: 30px;
          a {
            display: block;
            width: 130px;
            margin: 0 auto;
            img {
              margin-bottom: 12px;
            }
            p {
              font-size: 16px;
              color: #666;
            }
          }
          a:hover {
            opacity: 0.8;
          }
        }
      }
    }
    .section5 {
      background: #fff;
      margin-top: 20px;
      padding: 25px 0 50px;
      .secTitle {
        padding: 0 25px;
        font-size: 16px;
        font-weight: bold;
        color: #666;
        margin-bottom: 50px;
        .more {
          color: #7255e7;
          float: right;
          background: url("../../../static/images/more_icon.png") no-repeat right center;
          padding-right: 20px;
          font-size: 14px;
          font-weight: normal;
          margin-top: 2px;
        }
        .more:hover {
          opacity: 0.8;
        }
      }
      .resList {
        width: 550px;
        margin: 0 auto 50px;
        li {
          float: left;
          width: 100px;
          text-align: center;
          color: #666;
          cursor: pointer;
          position: relative;
          height: 30px;
          margin-right: 50px;
          > span {
            opacity: 0;
            position: absolute;
            display: block;
            width: 24px;
            height: 4px;
            border-radius: 2px;
            left: 50%;
            margin-left: -12px;
            bottom: 0;
            background: #009ff9;
          }
        }
        li:last-child {
          margin-right: 0;
        }
        li:hover,
        li.active {
          color: #009ff9;
          > span {
            opacity: 1;
          }
        }
      }
      .resCon {
        padding: 0 200px;
        .resCon_list {
          li {
            width: 50%;
            line-height: 42px;
            color: #666;
            float: left;
            a {
              display: block;
              position: relative;
              width: 80%;
              white-space: nowrap;
              margin: 0 auto;
              overflow: hidden;
              text-overflow: ellipsis;
              padding-left: 10px;
            }
            a:before {
              content: ".";
              position: absolute;
              color: #666;
              font-size: 26px;
              left: 0;
              top: -8px;
            }
            a:hover {
              color: #009ff9;
            }
          }
        }
      }
    }
    .regionTab {
      display: inline-block;
      margin: 10px 10px;
      height: 35px;
      line-height: 35px;
      border: 1px solid #eee;
      border-radius: 20px;
      padding: 0 20px;
      cursor: pointer;
    }
    .tabactive {
      border: 1px solid #1e5af9;
      border-radius: 20px;
    }
  }

  .partnerul {
    padding: 30px 60px;
    text-align: center;
    display: flex;
    flex-direction: row;
    span {
      margin-right: 50px;
      text-align: center;
    }
    span:hover {
      cursor: pointer;
      border-bottom: 1px solid #1e5af9;
      color: #1e5af9;
    }

    .active {
      border-bottom: 1px solid #1e5af9;
      color: #1e5af9;
    }
  }

  .imgdiv {
    width: calc(50% - 20px);
    height: 115px;
    text-align: center;
    vertical-align: 115px;
    margin-bottom: 20px;
    justify-content: center;
    color: #fff;
    padding-top: 35px;
  }

  .imgdiv:nth-child(1) {
    background: url("../../../static/images/yuAnPC.png") no-repeat;
    background-size: 100% 100%;
  }

  .imgdiv:nth-child(2) {
    background: url("../../../static/images/yuAnPS.png") no-repeat;
    background-size: 100% 100%;
  }

  .imgdiv2 {
    width: calc(50% - 20px);
    height: 115px;
    text-align: center;
    vertical-align: 115px;
    justify-content: center;
    color: #fff;
    padding-top: 35px;
  }

  .imgdiv2:nth-child(1) {
    background: url("../../../static/images/yingJiZX.png") no-repeat;
    background-size: 100% 100%;
  }

  .imgdiv2:nth-child(2) {
    background: url("../../../static/images/fangZaiJZ.png") no-repeat;
    background-size: 100% 100%;
  }

  /*.bottomDiv {
    padding: 80px 0px;
    height: 360px;
    width: 100%;
    background: url("../../../static/images/footbg.png");
    background-size: 100% 100%;
    display: flex;
    flex-direction: row;
    color: #fff;
    span {
      display: inline-block;
      width: 2px;
      height: 100%;
      background: #fff;
      margin: 0 50px;
    }
    h1 {
      font-size: 20px;
      margin-bottom: 25px;
    }
    .codeDiv {
      width: 42%;
    }
    .codeDiv1 {
      width: 58%;
    }
  }

  .footer {
    height: 125px;
    width: 100%;
    background: #656c80;
    display: flex;
    flex-direction: row;
    padding: 30px 0px;
    color: #fff;
    justify-content: center;
    div {
      padding-left: 60px;
      line-height: 30px;
    }
  }*/

  .selectmsg {
    cursor: not-allowed;
  }
</style>
<style lang='less'>
  .stepDialog {
    .el-dialog__body {
      padding: 0;
    }
    .step {
      .stepImg {
        text-align: center;
        padding: 35px 0 45px;
      }
      .stepBottom {
        background: #f9f9f9;
        height: 70px;
        border-radius: 0 0 8px 8px;
        line-height: 70px;
        text-align: center;
        img {
          margin-right: 5px;
          position: relative;
          top: -1px;
        }
        a.noteBtn {
          cursor: pointer;
          color: #7254e6;
          display: inline-block;
          height: 36px;
          line-height: 36px;
          width: 96px;
          text-align: center;
          border: 1px solid #3f80fe;
          border-radius: 8px;
          margin-left: 15px;
        }
        a.noteBtn:hover {
          opacity: .8;
        }
      }
    }
  }
</style>
